<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>订餐首页</title>
		
		<link rel="stylesheet" href="../res/css/bootstrap.min.css" />
		<script type="text/javascript" src="../res/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../res/js/jquery-1.12.4.js" ></script>
		
	</head>
	<style>
	*{
		margin:0px;
		padding:0px;}
	ul{
		float:left;
		margin-left: 200px;
		display: none;
		}
	li{
		list-style:none;
		border:1px solid grey;
		padding:3px;
		margin:3px;
		border-radius: 8px;
		float:left;}
	a{
	text-decoration: none;	
	}
	.bg{
		background:pink;}
	.noBg{
		background:white;}
</style>
</head>
<script>
	//定义一个标记index 下标标记（在什么位置定义）
	var index = 0;
	//轮转函数
	function loops(num){
		//判断Number 注意clearInterval函数 index = num-1 
		if(Number(num)){
			window.clearInterval(time);
			index = num - 1;
		}
		//获取img的数组
		var imgs = document.getElementsByName("lunbo");
		//获取li数组
		var lis = document.getElementsByTagName("li");
		//for 判断下标==index 显示或者隐藏
		for(var i = 0; i < imgs.length;i++){
			if(index==i){
				imgs[i].style.display="block";	
				//设置li效果
				lis[i].className = "bg";
			}else{
				imgs[i].style.display="none";		
				//取消li效果
				lis[i].className = "noBg";	
			}
		}
		//循环结束后 index++ 注意清零
		index++;
		if(index==imgs.length){
			index=0;	
		}
	}
	var time = window.setInterval("loops()",3000);
	function myStart(){
		time = window.setInterval("loops()",3000);
	}
</script>
	<body style="background-image: url(../res/i/timg.jpg);>
		<div class="col-xs-12" style="background-image: ">
			<div class="col-xs-12">
				<div class="col-xs-9">
					<img src="../res/i/U7{74~CC)1$`~GGCN_H(YJC.png" style="width: 20%;height: 20%" />
					<span style="font-size: 16px;">曹胖子订餐系统</span>
				</div>
				<div class="col-xs-3" style="font-size: 13px;">
					<span>欢迎你xxx</span>
				</div>
			</div>
			<div class="col-xs-12" style="font-size: 14px;">
				公告：<span>欢迎来到曹胖子餐厅。祝您用餐愉快！！</span>
			</div>
				<div class="col-xs-12" style="margin-top: 1%;margin: 0px;padding: 0px">
    				<img class="col-xs-12" src="../res/i/class1-1.jpg" name="lunbo" style="display:block" />
    				<img class="col-xs-12" src="../res/i/class1-2.jpg" name="lunbo" style="display:none" />
    				<img class="col-xs-12" src="../res/i/class1-3.jpg" name="lunbo" style="display:none" />
    				<img class="col-xs-12" src="../res/i/class1-4.jpg" name="lunbo" style="display:none"/>
    			<ul  >
    				<li onmouseover="loops(1)" onmouseout="myStart()">1</li>
    				<li onmouseover="loops(2)" onmouseout="myStart()">2</li>
    				<li onmouseover="loops(3)" onmouseout="myStart()">3</li>
    				<li onmouseover="loops(4)" onmouseout="myStart()">4</li>
  			  	</ul>
  			  	</div>
		
			<div class="col-xs-12" style="margin-top: 10px;">
				<div class="col-xs-2" style="font-size: 14px; margin: 0;padding: 0">
				
					<div style="margin-bottom: 50px;"><a href="checkMenuByweek.html?week=1" style="color: black;">星期一</a></div>
					<div style="margin-bottom: 50px;"><a href="checkMenuByweek.html?week=2" style="color: black;">星期二</a></div>
					<div style="margin-bottom: 50px;"><a href="checkMenuByweek.html?week=3" style="color: black;">星期三</a></div>
					<div style="margin-bottom: 50px;"><a href="checkMenuByweek.html?week=4" style="color: black;">星期四</a></div>
					<div style="margin-bottom: 50px;"><a href="checkMenuByweek.html?week=5" style="color: black;">星期五</a></div>
			
				</div>
				<div class="col-xs-10" style="height: 400px;overflow: scroll;" >
					<table>
						<#list publishmenus as item>
						<form action="">	
						<tr style="font-size: 14px; height: 20px;">
							<td style="text-align: center;width: 25%"><img src="../res/i/U7{74~CC)1$`~GGCN_H(YJC.png" style="height: 40%" /></td>
							<td style="text-align: center;width: 25%">${item.cname}</td>
							<td style="text-align: center;width: 25%">￥:${item.cprice}</td>
							<td style="text-align: center;width: 25%"><input type="button" value="预约购买"/></td>
						</tr>
						</form>
						</#list>
					</table>
						
				</div>
				
			</div>
			<!-- <div class="col-xs-2 col-xs-offset-9">
					<input type="button" value="结算" style="width: 100px; height: 50px; font-size: 20px; background-color: darkorange;position: fixed;top: 640px;"/>
			</div> -->
			
			<div class="col-xs-12" style="font-size: 15px; position: fixed; top: 630px;margin: 0;padding: 0">
				<div class="col-xs-3" style="height: 20px;line-height:20px ;"><a href="#" style="color: yellow;">本周菜单</a></div>
				<div class="col-xs-3" style="height: 20px;line-height:20px ;"><a href="#" style="color: yellow;">菜品管理</a></div>
				<div class="col-xs-3" style="height: 20px;line-height:20px ;"><a href="#" style="color: yellow;">系统管理</a></div>
				<div class="col-xs-3" style="height: 20px;line-height:20px ;"><a href="#" style="color: yellow;">个人中心</a></div>
				
			</div>
		</div>		
	</body>
</html>
